<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>礼品仓库</el-breadcrumb-item>
      <el-breadcrumb-item>入库列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button
            type="primary"
            @click="showAdd = true"
            v-show="user.power < 2"
            >添加礼品</el-button
          >
        </el-col>
        <el-col :span="4">
          <el-date-picker
            v-model="querInfo.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="datechange"
          ></el-date-picker>
        </el-col>
      </el-row>
      <el-table stripe show-summary :data="tableData">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="添加日期" width="180">
          <template v-slot="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              new Date(scope.row.saveDate)
                .toLocaleString('chinese', { hour12: false })
                .substring(5)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="仓库名称"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="giftName"
          label="商品名称"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="录入数量"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="getNum"
          label="出库数量"
          width="100"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
              enterable
            >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-delete-solid"
                circle
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog title="添加礼品" :visible.sync="showAdd" width="300px">
      <el-form label-position="left" label-width="80px" :model="addGiftForm">
        <el-form-item label="礼品名称">
          <el-input v-model="addGiftForm.giftName"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="addGiftForm.num"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addgift">入库</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      user: {},
      // 商品表格数据
      tableData: [],
      // 查询条件
      querInfo: {},
      // 添加对话框
      showAdd: false,
      // 添加礼品表单
      addGiftForm: {},
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('user'))
    this.getgoods()
  },
  methods: {
    // 获取礼品
    async getgoods() {
      const { data: res } = await this.$http.post('hx/goods', this.querInfo)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      Notification.success({
        title: '提示',
        message: res.meta.msg,
        position: 'top-left',
      })
      this.tableData = res.data
    },
    // 日期选择框变化触发搜索
    datechange() {
      this.getgoods()
    },
    // 添加仓库
    async addgift() {
      const { data: res } = await this.$http.post(
        'hx//goods/created',
        this.addGiftForm
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      Notification.success({
        title: '提示',
        message: res.meta.msg,
        position: 'top-left',
      })
      this.tableData.push(res.data)
      this.showAdd = false
    },
  },
}
</script>

<style lang="less" scoped>
</style>